<template>
	<div id="messenger-template-management">
		<el-row>
			<h3>选择客户端</h3>
			<el-form :inline="true">
				<el-select v-model="currentClient" placeholder="选择客户端" @change="searchTemplates">
					<el-option v-for="client in clients" :key="client.id" :label="client.clientName" :value="client.id"></el-option>
				</el-select>
			</el-form>
		</el-row>
		<section>
			<el-row style=";margin-top:20px" v-if="currentClient">
				<el-col :span="24" align="right">
					<el-button @click.native="addTemplate"><icon name="plus"></icon></el-button>
				</el-col>
			</el-row>
			<el-row>
				<el-table :data="templates" style="width: 100%;margin-top:20px;" stripe>
					<el-table-column prop="id" label="ID" width="100"></el-table-column>
					<el-table-column prop="messageType" label="类型" width="170"></el-table-column>
					<el-table-column prop="platform" label="平台" width="170"></el-table-column>
					<el-table-column prop="point.name" label="消息类型"></el-table-column>
					<el-table-column prop="sign" label="签名"></el-table-column>
					<el-table-column label="是否可用" width="100">
						<template slot-scope="scope">
							<p style="text-align: center">
								<icon name="check" v-if="scope.row.isEnable == 1" style="color: darkgreen"></icon>
								<icon name="remove" v-else style="color: red;"></icon>
							</p>
						</template>
					</el-table-column>
					<el-table-column width="150">
						<template slot-scope="scope">
							<div v-if="scope.row.messageType=='email'">
								<el-button type="primary" size="small" @click="showTemplate(scope.row)">显示</el-button>
							</div>
							<div v-if="scope.row.messageType=='sms'">
								{{scope.row.template}}
							</div>
						</template>
					</el-table-column>
					<el-table-column label="操作" width="70">
						<template slot-scope="scope" >
							<el-button size="small" @click="edit(scope.$index, scope.row)">
								<template>
									<icon name="pencil"></icon>
								</template>
							</el-button>
						</template>
					</el-table-column>
				</el-table>
			</el-row>
		</section>
		<el-dialog :visible.sync="addDialog" title="新建模板">
			<el-row>
				<el-form ref="form" label-width="120px">
					<el-form-item label="类型">
						<el-select v-model="newTemplate.type">
							<el-option v-for="types of addTypesList" :value="types" :key="types">{{types}}</el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="平台">
						<el-select v-model="newTemplate.platform">
							<el-option v-for="types of platforms" :value="types" :key="types">{{types}}</el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="消息名称">
						<el-select v-model="newTemplate.point">
							<el-option v-for="types of points" :value="types.id" :label="types.name" :key="types.id"></el-option>
						</el-select>
					</el-form-item>

					<el-form-item label="签名">
						<el-input v-model="newTemplate.signature"></el-input>
					</el-form-item>

					<el-form-item label="模板" v-if="newTemplate.type==='email'">
						<TextEditor v-model="newTemplate.content" :editorToolbar="customToolbar"></TextEditor>
					</el-form-item>

					<el-form-item label="是否可用">
						<el-switch on-text="" off-text="" v-model="newTemplate.enabled"></el-switch>
					</el-form-item>

					<el-col :span="24" align="right">
						<el-button @click.native="cancelAddTemplate">取消</el-button>
						<el-button @click.native="submitAddTemplate" type="primary">提交</el-button>
					</el-col>
				</el-form>
			</el-row>
		</el-dialog>
		<el-dialog :visible.sync="showingTemplate" title="模板">
			<div v-html="templatePreview"></div>
		</el-dialog>
	</div>
</template>

<script>
	import TextEditor from '@/components/TextEditor'

	export default {
		components:{
			TextEditor
		},
		data(){
			return {
				showingTemplate:false,
				currentClient:null,
				clients:[],
				templates:[],
				platforms:['juhe','alidayu'],
				points:[],
				templatePreview:'',
				addDialog:false,

				addTypesList:['email','sms'],

				newTemplate:{
					type: undefined,
					platform: undefined,
					point: undefined,
					signature: '',
					content:'',
					enabled:true,
				},
				customToolbar: [['bold','italic','underline'],[{'list':'ordered'},{'list':'bullet'}],['image','code-block']],
			}
		},
		methods:{
			cancelAddTemplate(){},
			submitAddTemplate(){
				let error;
				if(!this.newTemplate.type) error = '类型';
				if(!this.newTemplate.platform) error = '平台';
				if(!this.newTemplate.point) error = '消息名称';
				if(!this.newTemplate.signature) error = '签名';
				if(error){
					this.$message({
						type:'error',
						message:error+'不能为空'
					});
					return false;
				}else{
//					if(this.newTemplate.enabled) this.newTemplate.enabled = 1;
//					if(!this.newTemplate.enabled) this.newTemplate.enabled = 0;
					this.$store.dispatch({
						type:'fetch',
						method:'post',
						name:'createTemplate',
						data:{
							cId:this.currentClient,
							messageType: this.newTemplate.type,
							platform: this.newTemplate.platform,
							sign: this.newTemplate.signature,
							pointId: this.newTemplate.point,
							template: this.newTemplate.content,
							enabled: this.newTemplate.enabled,
						}
					}).then(res=>{
						if(res.errCode){
							this.$message({
								message:res.errMsg,
								type: 'error'
							});
						}else{
							this.resetTemplate();
							this.requestTemplates(this.currentClient);
							this.addDialog = false;
							this.$message({message:'添加成功',type:'success'})

						}
					}).catch(error=>{
						this.$message({
							message:'连不上服务器',
							type: 'error'
						});
					});
				}

			},
			resetTemplate(){
				this.newTemplate = {
					type: undefined,
					platform: undefined,
					point: undefined,
					signature: '',
					content:'',
					enabled:true,
				};
			},
			requestPoints(){
				this.$store.dispatch({
					type:'fetch',
					name:'getMailPointList'
				}).then(res=>{
					if(res.errCode){
						this.$message({
							message:res.errMsg,
							type: 'error'
						});
					}else{
					  console.log(res)
						this.points = res;
					}
				}).catch(error=>{
					this.$message({
						message:'连不上服务器',
						type: 'error'
					});
				});
			},
			requestClients(){
				this.$store.dispatch({
					type:'fetch',
					name:'getClientList'
				}).then(res=>{
					if(res.errCode){
						this.$message({
							message:res.errMsg,
							type: 'error'
						});
					}else{
						this.clients = res;
					}
				}).catch(error=>{
					this.$message({
						message:'连不上服务器',
						type: 'error'
					});
				})
			},
			requestTemplates(id){
				this.$store.dispatch({
					type:'fetch',
					name:'getTemplateByClient',
					data:{
						cId:id,
					}
				}).then(res=>{
					if(res.errCode){
						this.$message({
							message:res.errMsg,
							type: 'error'
						});
					}else{
						console.log(res);
						this.templates = res;
					}
				}).catch(error=>{
					this.$message({
						message:'连不上服务器',
						type: 'error'
					});
				})
			},
			searchTemplates(){
				if(this.currentClient){
					this.requestTemplates(this.currentClient);
				}else{
					this.$message({
						message:'先选择客户端',
						type:'error'
					})
				}
			},
			showTemplate(row){
				this.showingTemplate = true;
				this.templatePreview = row.template;
			},
			addTemplate(){
				this.resetTemplate();
				this.addDialog = true;
			},
			edit(i,row){
				this.$router.push('/message/template/'+row.id);
			}
		},
		created(){
			this.requestClients();
			this.requestPoints();
		}
	}
</script>
